<template>
  <div class="logo">
    <router-link :to="{name: index}">

      <img v-if="theme === 'dark'"  :src="logoUrl"  alt="logo" style="width:32px; height:32px;">
      <img v-else :src="logoUrl"  alt="logo" style="width:32px; height:32px;">
      <h1 v-if="showTitle" style="width: 120px;height:50px;overflow: hidden;text-overflow: ellipsis;">{{ theTitle }}</h1>
    </router-link>
  </div>
</template>

<script>

  import store from '@/store'
  import {
    INDEX_MAIN_PAGE_NAME,
  } from '@/store/mutation-types'

  export default {
    name: 'Logo',
    props: {
      title: {
        type: String,
        required: false
      },
      showTitle: {
        type: Boolean,
        default: true,
        required: false
      },
      indexName: {
        type: Number,
        default: 0
      },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
    },
    data () {
      return {
        logoUrl: window._CONFIG.logo_url || process.env.BASE_URL + 'logo.svg',
        index: '',
        theTitle:this.title || window._CONFIG.simply_name  || this.$t('m.logo.simply_name')
      }
    },
    watch: {
      indexName: {
        handler (value) {
          if (1 == value) {
            this.index = store.getters.CONSOLE_INDEX_MAIN_PAGE_NAME
          } else {
            this.index = INDEX_MAIN_PAGE_NAME
          }
        },
        immediate: true
      }
    }
  }
</script>
<style lang="less" scoped>
  /*缩小首页布 局顶部的高度*/
  @height: 50px;

  .sider {
    box-shadow: none !important;

    .logo {
      height: @height !important;
      line-height: @height !important;
      box-shadow: none !important;
      transition: background 300ms;
      a {
        color: white;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    &.light .logo {
      background-color: @primary-color;
    }

    &.dark .logo {
      background-color: transparent;
    }
  }



</style>
